<template>
    <el-card
        class="title-card mb-10"
        shadow="never"
        style="border: none; background: #fff"
    >
        <div class="title">我的会员</div>
    </el-card>
    <el-card
        class="content-card"
        shadow="never"
        style="border: none; background: #fff"
    >
        <div class="member_info_wrapper">
            <div class="base_info">
                <div class="user_info">
                    <div class="avatar">
                        <img class="img" :src="userInfoStore.userInfo.avatar" />
                    </div>
                    <div class="name_info">
                        <div class="name">林UnGS</div>
                        <div class="status">您还不是会员</div>
                    </div>
                </div>
                <div class="saving">开通会员平均每年可省：￥9500</div>
                <div class="price_area_main">
                    <div class="price_area">
                        <div
                            class="price_block"
                            v-for="item in priceList"
                            :key="item.id"
                            :class="currentId == item.id ? 'active' : ''"
                        >
                            <div
                                class="price_box_container"
                                @click="
                                    () => {
                                        changeId(item.id);
                                    }
                                "
                            >
                                <div class="recommend" v-show="item.data.recom">
                                    <span class="btn">推荐</span>
                                </div>
                                <div class="title">
                                    {{ item.data.title }}
                                </div>
                                <div class="middle">
                                    <span class="doller">￥</span>
                                    <div class="price">
                                        <span class="big">{{
                                            item.data.price
                                        }}</span>
                                        <span style="font-size: 16px">/季</span>
                                    </div>
                                </div>
                                <div class="bottom">
                                    合计 ￥{{ item.data.price
                                    }}<span v-if="item.data.isYouthOnly"
                                        >(青少年专属)</span
                                    >
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="btn_area">
                    <button class="btn">立即以{{ needPay }}元开通</button>
                </div>
                <div class="agreement_guide">
                    <span>开通即视为同意</span>
                    <a href="javascript:;" class="agreement_link"
                        >《会员服务协议》</a
                    >
                </div>
            </div>
            <div class="member_benefits">
                <div class="title">会员专属权益</div>
                <ul class="member_right_list">
                    <li class="right_item">
                        <div class="pop_box">
                            <div class="container_box">
                                <span
                                    class="popup_img"
                                    style="
                                        background-image: url('https://rs.dance365.com/teach_video_free.png');
                                    "
                                ></span>
                                <div class="popup_content">
                                    <p>
                                        会员专区的<span class="count">742</span
                                        >个课程，会员全都可以免费观看学习！课程总价若干万元，而且每月更新、持续增加。
                                    </p>
                                    <p>
                                        也许学会某一课程，单独购买的单价就已远超会员费，绝对超值！
                                    </p>
                                </div>
                                <div class="popup_link">立即前往会员专区</div>
                                <div class="arrow"></div>
                                <div class="arrow_shadow"></div>
                            </div>
                        </div>
                        <div>
                            <span
                                class="icon"
                                data-src="https://rs.dance365.com/teach_video_free.png"
                                style="
                                    background-image: url('https://rs.dance365.com/teach_video_free.png');
                                "
                            ></span>
                            <div style="margin: 14px 0">
                                <p style="margin: 0px">
                                    <span style="color: rgb(249, 54, 132)"
                                        >742</span
                                    >个会员专区
                                </p>
                                <p style="margin: 0px">课程免费学习</p>
                            </div>
                        </div>
                    </li>
                    <li class="right_item">
                        <div class="pop_box">
                            <div class="container_box">
                                <span
                                    class="popup_img"
                                    style="
                                        background-image: url('https://rs.dance365.com/teach_video_free.png');
                                    "
                                ></span>
                                <div class="popup_content">
                                    <p>
                                        会员专区的<span class="count">742</span
                                        >个课程，会员全都可以免费观看学习！课程总价若干万元，而且每月更新、持续增加。
                                    </p>
                                    <p>
                                        也许学会某一课程，单独购买的单价就已远超会员费，绝对超值！
                                    </p>
                                </div>
                                <div class="popup_link">立即前往会员专区</div>
                                <div class="arrow"></div>
                                <div class="arrow_shadow"></div>
                            </div>
                        </div>
                        <div>
                            <span
                                class="icon"
                                data-src="https://rs.dance365.com/teach_video_free.png"
                                style="
                                    background-image: url('https://rs.dance365.com/teach_video_free.png');
                                "
                            ></span>
                            <div style="margin: 14px 0">
                                <p style="margin: 0px">
                                    <span style="color: rgb(249, 54, 132)"
                                        >742</span
                                    >个会员专区
                                </p>
                                <p style="margin: 0px">课程免费学习</p>
                            </div>
                        </div>
                    </li>
                    <li class="right_item">
                        <div class="pop_box">
                            <div class="container_box">
                                <span
                                    class="popup_img"
                                    style="
                                        background-image: url('https://rs.dance365.com/teach_video_free.png');
                                    "
                                ></span>
                                <div class="popup_content">
                                    <p>
                                        会员专区的<span class="count">742</span
                                        >个课程，会员全都可以免费观看学习！课程总价若干万元，而且每月更新、持续增加。
                                    </p>
                                    <p>
                                        也许学会某一课程，单独购买的单价就已远超会员费，绝对超值！
                                    </p>
                                </div>
                                <div class="popup_link">立即前往会员专区</div>
                                <div class="arrow"></div>
                                <div class="arrow_shadow"></div>
                            </div>
                        </div>
                        <div>
                            <span
                                class="icon"
                                data-src="https://rs.dance365.com/teach_video_free.png"
                                style="
                                    background-image: url('https://rs.dance365.com/teach_video_free.png');
                                "
                            ></span>
                            <div style="margin: 14px 0">
                                <p style="margin: 0px">
                                    <span style="color: rgb(249, 54, 132)"
                                        >742</span
                                    >个会员专区
                                </p>
                                <p style="margin: 0px">课程免费学习</p>
                            </div>
                        </div>
                    </li>
                    <li class="right_item">
                        <div class="pop_box">
                            <div class="container_box">
                                <span
                                    class="popup_img"
                                    style="
                                        background-image: url('https://rs.dance365.com/teach_video_free.png');
                                    "
                                ></span>
                                <div class="popup_content">
                                    <p>
                                        会员专区的<span class="count">742</span
                                        >个课程，会员全都可以免费观看学习！课程总价若干万元，而且每月更新、持续增加。
                                    </p>
                                    <p>
                                        也许学会某一课程，单独购买的单价就已远超会员费，绝对超值！
                                    </p>
                                </div>
                                <div class="popup_link">立即前往会员专区</div>
                                <div class="arrow"></div>
                                <div class="arrow_shadow"></div>
                            </div>
                        </div>
                        <div>
                            <span
                                class="icon"
                                data-src="https://rs.dance365.com/teach_video_free.png"
                                style="
                                    background-image: url('https://rs.dance365.com/teach_video_free.png');
                                "
                            ></span>
                            <div style="margin: 14px 0">
                                <p style="margin: 0px">
                                    <span style="color: rgb(249, 54, 132)"
                                        >742</span
                                    >个会员专区
                                </p>
                                <p style="margin: 0px">课程免费学习</p>
                            </div>
                        </div>
                    </li>
                    <li class="right_item">
                        <div class="pop_box">
                            <div class="container_box">
                                <span
                                    class="popup_img"
                                    style="
                                        background-image: url('https://rs.dance365.com/teach_video_free.png');
                                    "
                                ></span>
                                <div class="popup_content">
                                    <p>
                                        会员专区的<span class="count">742</span
                                        >个课程，会员全都可以免费观看学习！课程总价若干万元，而且每月更新、持续增加。
                                    </p>
                                    <p>
                                        也许学会某一课程，单独购买的单价就已远超会员费，绝对超值！
                                    </p>
                                </div>
                                <div class="popup_link">立即前往会员专区</div>
                                <div class="arrow"></div>
                                <div class="arrow_shadow"></div>
                            </div>
                        </div>
                        <div>
                            <span
                                class="icon"
                                data-src="https://rs.dance365.com/teach_video_free.png"
                                style="
                                    background-image: url('https://rs.dance365.com/teach_video_free.png');
                                "
                            ></span>
                            <div style="margin: 14px 0">
                                <p style="margin: 0px">
                                    <span style="color: rgb(249, 54, 132)"
                                        >742</span
                                    >个会员专区
                                </p>
                                <p style="margin: 0px">课程免费学习</p>
                            </div>
                        </div>
                    </li>
                    <li class="right_item" style="margin-right: 0">
                        <div class="pop_box">
                            <div class="container_box">
                                <span
                                    class="popup_img"
                                    style="
                                        background-image: url('https://rs.dance365.com/teach_video_free.png');
                                    "
                                ></span>
                                <div class="popup_content">
                                    <p>
                                        会员专区的<span class="count">742</span
                                        >个课程，会员全都可以免费观看学习！课程总价若干万元，而且每月更新、持续增加。
                                    </p>
                                    <p>
                                        也许学会某一课程，单独购买的单价就已远超会员费，绝对超值！
                                    </p>
                                </div>
                                <div class="popup_link">立即前往会员专区</div>
                                <div class="arrow"></div>
                                <div class="arrow_shadow"></div>
                            </div>
                        </div>
                        <div>
                            <span
                                class="icon"
                                data-src="https://rs.dance365.com/teach_video_free.png"
                                style="
                                    background-image: url('https://rs.dance365.com/teach_video_free.png');
                                "
                            ></span>
                            <div style="margin: 14px 0">
                                <p style="margin: 0px">
                                    <span style="color: rgb(249, 54, 132)"
                                        >742</span
                                    >个会员专区
                                </p>
                                <p style="margin: 0px">课程免费学习</p>
                            </div>
                        </div>
                    </li>
                    <li class="right_item">
                        <div class="pop_box">
                            <div class="container_box">
                                <span
                                    class="popup_img"
                                    style="
                                        background-image: url('https://rs.dance365.com/teach_video_free.png');
                                    "
                                ></span>
                                <div class="popup_content">
                                    <p>
                                        会员专区的<span class="count">742</span
                                        >个课程，会员全都可以免费观看学习！课程总价若干万元，而且每月更新、持续增加。
                                    </p>
                                    <p>
                                        也许学会某一课程，单独购买的单价就已远超会员费，绝对超值！
                                    </p>
                                </div>
                                <div class="popup_link">立即前往会员专区</div>
                                <div class="arrow"></div>
                                <div class="arrow_shadow"></div>
                            </div>
                        </div>
                        <div>
                            <span
                                class="icon"
                                data-src="https://rs.dance365.com/teach_video_free.png"
                                style="
                                    background-image: url('https://rs.dance365.com/teach_video_free.png');
                                "
                            ></span>
                            <div style="margin: 14px 0">
                                <p style="margin: 0px">
                                    <span style="color: rgb(249, 54, 132)"
                                        >742</span
                                    >个会员专区
                                </p>
                                <p style="margin: 0px">课程免费学习</p>
                            </div>
                        </div>
                    </li>
                    <li class="right_item">
                        <div class="pop_box">
                            <div class="container_box">
                                <span
                                    class="popup_img"
                                    style="
                                        background-image: url('https://rs.dance365.com/teach_video_free.png');
                                    "
                                ></span>
                                <div class="popup_content">
                                    <p>
                                        会员专区的<span class="count">742</span
                                        >个课程，会员全都可以免费观看学习！课程总价若干万元，而且每月更新、持续增加。
                                    </p>
                                    <p>
                                        也许学会某一课程，单独购买的单价就已远超会员费，绝对超值！
                                    </p>
                                </div>
                                <div class="popup_link">立即前往会员专区</div>
                                <div class="arrow"></div>
                                <div class="arrow_shadow"></div>
                            </div>
                        </div>
                        <div>
                            <span
                                class="icon"
                                data-src="https://rs.dance365.com/teach_video_free.png"
                                style="
                                    background-image: url('https://rs.dance365.com/teach_video_free.png');
                                "
                            ></span>
                            <div style="margin: 14px 0">
                                <p style="margin: 0px">
                                    <span style="color: rgb(249, 54, 132)"
                                        >742</span
                                    >个会员专区
                                </p>
                                <p style="margin: 0px">课程免费学习</p>
                            </div>
                        </div>
                    </li>
                    <li class="right_item">
                        <div class="pop_box">
                            <div class="container_box">
                                <span
                                    class="popup_img"
                                    style="
                                        background-image: url('https://rs.dance365.com/teach_video_free.png');
                                    "
                                ></span>
                                <div class="popup_content">
                                    <p>
                                        会员专区的<span class="count">742</span
                                        >个课程，会员全都可以免费观看学习！课程总价若干万元，而且每月更新、持续增加。
                                    </p>
                                    <p>
                                        也许学会某一课程，单独购买的单价就已远超会员费，绝对超值！
                                    </p>
                                </div>
                                <div class="popup_link">立即前往会员专区</div>
                                <div class="arrow"></div>
                                <div class="arrow_shadow"></div>
                            </div>
                        </div>
                        <div>
                            <span
                                class="icon"
                                data-src="https://rs.dance365.com/teach_video_free.png"
                                style="
                                    background-image: url('https://rs.dance365.com/teach_video_free.png');
                                "
                            ></span>
                            <div style="margin: 14px 0">
                                <p style="margin: 0px">
                                    <span style="color: rgb(249, 54, 132)"
                                        >742</span
                                    >个会员专区
                                </p>
                                <p style="margin: 0px">课程免费学习</p>
                            </div>
                        </div>
                    </li>
                    <li class="right_item">
                        <div class="pop_box">
                            <div class="container_box">
                                <span
                                    class="popup_img"
                                    style="
                                        background-image: url('https://rs.dance365.com/teach_video_free.png');
                                    "
                                ></span>
                                <div class="popup_content">
                                    <p>
                                        会员专区的<span class="count">742</span
                                        >个课程，会员全都可以免费观看学习！课程总价若干万元，而且每月更新、持续增加。
                                    </p>
                                    <p>
                                        也许学会某一课程，单独购买的单价就已远超会员费，绝对超值！
                                    </p>
                                </div>
                                <div class="popup_link">立即前往会员专区</div>
                                <div class="arrow"></div>
                                <div class="arrow_shadow"></div>
                            </div>
                        </div>
                        <div>
                            <span
                                class="icon"
                                data-src="https://rs.dance365.com/teach_video_free.png"
                                style="
                                    background-image: url('https://rs.dance365.com/teach_video_free.png');
                                "
                            ></span>
                            <div style="margin: 14px 0">
                                <p style="margin: 0px">
                                    <span style="color: rgb(249, 54, 132)"
                                        >742</span
                                    >个会员专区
                                </p>
                                <p style="margin: 0px">课程免费学习</p>
                            </div>
                        </div>
                    </li>
                    <li class="right_item">
                        <div class="pop_box">
                            <div class="container_box">
                                <span
                                    class="popup_img"
                                    style="
                                        background-image: url('https://rs.dance365.com/teach_video_free.png');
                                    "
                                ></span>
                                <div class="popup_content">
                                    <p>
                                        会员专区的<span class="count">742</span
                                        >个课程，会员全都可以免费观看学习！课程总价若干万元，而且每月更新、持续增加。
                                    </p>
                                    <p>
                                        也许学会某一课程，单独购买的单价就已远超会员费，绝对超值！
                                    </p>
                                </div>
                                <div class="popup_link">立即前往会员专区</div>
                                <div class="arrow"></div>
                                <div class="arrow_shadow"></div>
                            </div>
                        </div>
                        <div>
                            <span
                                class="icon"
                                data-src="https://rs.dance365.com/teach_video_free.png"
                                style="
                                    background-image: url('https://rs.dance365.com/teach_video_free.png');
                                "
                            ></span>
                            <div style="margin: 14px 0">
                                <p style="margin: 0px">
                                    <span style="color: rgb(249, 54, 132)"
                                        >742</span
                                    >个会员专区
                                </p>
                                <p style="margin: 0px">课程免费学习</p>
                            </div>
                        </div>
                    </li>
                    <li class="right_item" style="margin-right: 0">
                        <div class="pop_box">
                            <div class="container_box">
                                <span
                                    class="popup_img"
                                    style="
                                        background-image: url('https://rs.dance365.com/teach_video_free.png');
                                    "
                                ></span>
                                <div class="popup_content">
                                    <p>
                                        会员专区的<span class="count">742</span
                                        >个课程，会员全都可以免费观看学习！课程总价若干万元，而且每月更新、持续增加。
                                    </p>
                                    <p>
                                        也许学会某一课程，单独购买的单价就已远超会员费，绝对超值！
                                    </p>
                                </div>
                                <div class="popup_link">立即前往会员专区</div>
                                <div class="arrow"></div>
                                <div class="arrow_shadow"></div>
                            </div>
                        </div>
                        <div>
                            <span
                                class="icon"
                                data-src="https://rs.dance365.com/teach_video_free.png"
                                style="
                                    background-image: url('https://rs.dance365.com/teach_video_free.png');
                                "
                            ></span>
                            <div style="margin: 14px 0">
                                <p style="margin: 0px">
                                    <span style="color: rgb(249, 54, 132)"
                                        >742</span
                                    >个会员专区
                                </p>
                                <p style="margin: 0px">课程免费学习</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </el-card>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { useCenter } from "@/stores/modules/center";
import { useUserInfoStore } from "@/stores/modules/userInfo";
const userInfoStore = useUserInfoStore();
const centerStore = useCenter();
const priceList = computed(() => {
    return centerStore.memberList;
});
// 被选的套餐Id
const currentId = ref("VIP3");
// 需要付的钱

const needPay = computed(() => {
    // @ts-ignore
    return priceList.value.find((item) => item?.id == currentId.value)?.data
        .price;
});
// 修改被选的套餐Id
const changeId = (id: string) => {
    // console.log(id);
    currentId.value = id;
};

onMounted(() => {
    centerStore.getMemberList();
});
</script>

<style scoped lang="less">
.title-card {
    // 去除el-card的padding
    /deep/.el-card__body {
        padding: 0 !important;
    }
    .title {
        float: left;
        padding: 28px 30px;
        color: #111;
        font-size: 14px;
        position: relative;
    }
}
.content-card {
    // 去除el-card的padding
    /deep/.el-card__body {
        padding: 0 !important;
    }
    /deep/.el-card {
        overflow-y: hidden;
        overflow-x: auto;
    }
    .member_info_wrapper {
        padding: 30px;
        .base_info {
            border-bottom: 1px solid #e3e3e3;
            padding-bottom: 37px;
            text-align: center;
            .user_info {
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;
                .avatar {
                    width: 100px;
                    height: 100px;
                    border-radius: 50%;
                    overflow: hidden;
                    .img {
                        width: 100px;
                        height: 100px;
                    }
                }
                .name_info {
                    text-align: center;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    .name {
                        margin-left: 21px;
                        font-size: 20px;
                        color: #000;
                        cursor: pointer;
                        text-align: left;
                        line-height: 1.15;
                    }
                    .status {
                        margin-top: 14px;
                        font-size: 14px;
                        color: #f93684;
                        text-align: left;
                        margin-left: 27px;
                    }
                }
            }
            .saving {
                text-align: center;
                margin-top: 19px;
                line-height: 1.15;
            }
            .price_area_main {
                width: 100%;
                .price_area {
                    width: 720px;
                    display: flex;
                    align-items: center;
                    min-height: 124px;
                    flex-wrap: wrap;
                    margin: 21px auto 0;
                    .price_block {
                        margin-top: 30px;
                        // 去掉最后一个子元素的右外边距
                        &:last-child {
                            .price_box_container {
                                margin-right: 0;
                            }
                        }
                        &.active {
                            .price_box_container {
                                border: 2px solid #f93684;
                                background-color: #f9ebf1;
                                color: #f93684;
                            }
                        }
                        .price_box_container {
                            position: relative;
                            box-sizing: border-box;
                            margin-right: 30px;
                            width: 220px;
                            height: 124px;
                            border: 1px solid #b1b5c1;
                            border-radius: 10px;
                            text-align: center;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-evenly;
                            cursor: pointer;
                            .recommend {
                                position: absolute;
                                width: 76px;
                                height: 36px;
                                line-height: 36px;
                                right: -20px;
                                top: -16px;
                                padding: 3px 2px;
                                background-color: #fff;
                                border-radius: 20px;
                                .btn {
                                    display: inline-block;
                                    width: 100%;
                                    height: 100%;
                                    color: #fff;
                                    font-size: 14px;
                                    background: linear-gradient(
                                        -56deg,
                                        #ff638f,
                                        #ff4683
                                    );
                                    border-radius: 20px;
                                }
                            }
                            .title {
                                margin: 0;
                                padding: 0;
                                line-height: 20px;
                            }
                            .middle {
                                display: flex;
                                vertical-align: baseline;
                                justify-content: center;
                                .doller {
                                    line-height: 36px;
                                }
                                .price {
                                    .big {
                                        font-size: 30px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .btn_area {
                width: 330px;
                display: block;
                margin: 0 auto;
                position: relative;
                .btn {
                    width: 330px;
                    height: 56px;
                    font-size: 16px;
                    margin: 30px auto 12px;
                    border: none;
                    border-radius: 10px;
                    background: linear-gradient(-56deg, #ff4683, #ff638f);
                    color: #fff;
                    cursor: pointer;
                }
            }
            .agreement_guide {
                font-size: 14px;
                width: 100%;
                display: flex;
                justify-content: center;
                text-align: center;
                .agreement_link {
                    color: #f93684;
                }
            }
        }
        .member_benefits {
            border-bottom: 1px solid #e3e3e3;
            padding-bottom: 15px;
            .title {
                color: #111;
                font-weight: 700;
                font-size: 20px;
                margin-top: 32px;
            }
            .member_right_list {
                padding-left: 19px;
                justify-content: space-between;
                color: #111;
                font-weight: 400;
                margin: 20px 0 5px;
                .right_item {
                    position: relative;
                    white-space: normal;
                    margin-right: 30px;
                    line-height: 20px;
                    width: 129px;
                    height: 129px;
                    box-sizing: border-box;
                    border: 1px solid #e3e3e3;
                    border-radius: 8px;
                    text-align: center;
                    padding: 14px 0 0;
                    font-size: 14px;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    display: inline-block;
                    vertical-align: middle;
                    margin-bottom: 30px;

                    &:hover {
                        .pop_box {
                            display: block;
                        }
                    }
                    .pop_box {
                        padding-bottom: 5px;
                        display: none;
                        position: absolute;
                        left: -50%;
                        bottom: 128px;
                        width: 260px;
                        box-sizing: border-box;
                        background: #fff;
                        // z-index: 99999;
                        .container_box {
                            position: relative;
                            padding: 18px 20px;
                            border: 2px solid rgba(249, 83, 138, 0.5);
                            min-height: 230px;
                            border-radius: 15px;
                            .popup_img {
                                display: block;
                                width: 50px;
                                height: 50px;
                                border: 1px solid #ffc6d3;
                                border-radius: 26px;
                                text-align: center;
                                margin: 0 auto 10px;
                                background-repeat: no-repeat;
                                background-size: 75%;
                                background-position: 50%;
                            }
                            .popup_content {
                                text-align: left;
                                margin-top: 15px;
                                font-size: 14px;
                                color: #333;
                                line-height: 24px;
                                .count {
                                    color: #f93684;
                                }
                                p {
                                    margin: 5px 0 0;
                                }
                            }
                            .popup_link {
                                margin: 25px auto 20px;
                                line-height: 36px;
                                border-radius: 6px;
                                color: #fff;
                                font-size: 16px;
                                height: 36px;
                                width: 80%;
                                background: #f9538a;
                                text-align: center;
                                cursor: pointer;
                            }
                            .arrow {
                                position: absolute;
                                left: 50%;
                                transform: translateX(-50%);
                                bottom: -10px;
                                width: 0;
                                border-style: solid;
                                border-width: 8px 8px 0;
                                border-color: rgba(249, 83, 138, 0.5)
                                    transparent transparent;
                            }
                            .arrow_shadow {
                                position: absolute;
                                left: 50%;
                                transform: translateX(-50%);
                                bottom: -7px;
                                width: 0;
                                border-style: solid;
                                border-width: 8px 8px 0;
                                border-color: #fff transparent transparent;
                            }
                        }
                    }

                    .icon {
                        display: block;
                        margin: 0 auto;
                        width: 46px;
                        height: 42px;
                        background-size: cover;
                    }
                }
            }
        }
    }
}
</style>
